import React from 'react';
import {Button, Col, Row, Typography} from 'antd';
import {TweenOneGroup} from 'rc-tween-one';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';

const {Text} = Typography
class ProgramList extends React.PureComponent {
  getChildrenToRender = (data) =>
    data.map((item) => {
      return (
        <Col key={item.name} {...item}>
          <div {...item.children.wrapper}>
            <span {...item.children.img}>
              <p style={{fontWeight: 'bold', fontSize: '14px'}}>《{item.children.title}》</p>
              <p style={{textAlign: 'left'}}>
                <Text code type="danger">学习内容</Text> :
                {item.children.description}</p>
              <p style={{textAlign: 'left'}}>
                <Text code type="danger">时间</Text> :
                {item.children.duration}</p>
              <p style={{textAlign: 'left'}}>
                <Text code type="danger">适用对象</Text> :
                  {item.children.target}</p>
              {/*<img src={item.children.img.children} height="100%" alt="img" />*/}
            </span>
            <Button type='primary'
                    style={{marginTop: 10}}
                    onClick={() => {
                      window.location.href = item.children.url
                    }}>免费学习</Button>
          </div>
        </Col>
      );
    });

  render() {
    const {...props} = this.props;
    const {dataSource} = props;
    delete props.dataSource;
    delete props.isMobile;
    const childrenToRender = this.getChildrenToRender(
      dataSource.block.children
    );
    return (
      <div {...props} {...dataSource.wrapper}>
        <div {...dataSource.page}>
          <div key="title" {...dataSource.titleWrapper}>
            {dataSource.titleWrapper.children.map((item, i) =>
              React.createElement(
                item.name.indexOf('title') === 0 ? 'h1' : 'div',
                {key: i.toString(), ...item},
                typeof item.children === 'string' &&
                item.children.match(
                  /\.(svg|gif|jpg|jpeg|png|JPG|PNG|GIF|JPEG)$/
                )
                  ? React.createElement('img', {
                    src: item.children,
                    alt: 'img',
                  })
                  : item.children
              )
            )}
          </div>
          <OverPack
            className={`content-template ${props.className}`}
            {...dataSource.OverPack}
          >
            <TweenOneGroup
              component={Row}
              key="ul"
              enter={{
                y: '+=30',
                opacity: 0,
                type: 'from',
                ease: 'easeInOutQuad',
              }}
              leave={{y: '+=30', opacity: 0, ease: 'easeInOutQuad'}}
              {...dataSource.block}
            >
              {childrenToRender}
            </TweenOneGroup>
          </OverPack>
        </div>
      </div>
    );
  }
}

export default ProgramList;
